/*
 * 产品列表
 * @Author: ljb
 * @Date: 2018-04-20 17:38:08
 * @Last Modified by: ljb
 * @Last Modified time: 2018-08-31 14:41:25
 */
<style lang="less" rel="stylesheet/less" type="text/less">

	.v-home-customer-product-index {
		.detail-btn {
			color: #5fc0f2;
			cursor: pointer;
		}
		.circular-border-img {
			margin-top: 4px;
		}
	}


</style>

<template>
	<div class="v-home-customer-product-index">

		<Table
			:loading="loading"
			:columns="columns"
			:data="products"
			class="personal-scrollbar"
			height="350"/>

	</div>
</template>

<script>

export default {
	name: 'HomeProductIndex',
	props: {
		loading: {
			type: Boolean,
			required: true,
		},
		products: {
			type: Array,
			required: true,
		},
	},
	data() {
		return {
			columns: [
				{
					title: this.$t('home.product_name'),
					key: 'name',
					align: 'center',
					render: (h, { row }) => (
						<div>
							<img src={ row.thumb_image ? row.thumb_image.key : '' } class="circular-border-img" alt="" width="48" height="48"/>
							<p class="nowrap" title={row.name}> { row.name || '-' } </p>
						</div>),
				},
				{
					title: this.$t('home.brand_name'),
					key: 'brand_name',
					align: 'center',
					render: (h, { row }) => <div> { row.brand_name || '-' } </div>,
				},
				{
					title: this.$t('home.category_name'),
					key: 'category_name',
					align: 'center',
					render: (h, { row }) => <div> { row.category_name || '-' } </div>,
				},
				{
					title: this.$t('home.try_on_count'),
					key: 'try_on',
					align: 'center',
					render: (h, { row }) => (
						<div>
							{ row.try_on || '-' }
							<span on-click={() => { this.$emit('detail', row.id); }} class="detail-btn">
								{ this.$t('home.watch_detail') } >
							</span>
						</div>),
				},
			],
		};
	},
	methods: {


	},
};
</script>
